<div>
    <div appPageTool [btnsTpl]="btnsTpl">
        <ng-template #btnsTpl>
            <app-business-tool-btn [buttonList]="buttonList" (btnClick)="onBtnClick($event)">
            </app-business-tool-btn>
        </ng-template>
    </div>

    <form nz-form [formGroup]="saveForm">
        <nz-form-item>
            <nz-form-label [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="24">
                <app-line-title title="基本信息"></app-line-title>
            </nz-form-label>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label [nzSm]="24" [nzMd]="5" [nzLg]="3" [nzXl]="2" nzRequired>按钮编号</nz-form-label>
            <nz-form-control [nzSm]="24" [nzMd]="7" [nzLg]="9" [nzXl]="10" nzErrorTip="按钮编号格式不正确（格式：1-30个字符）！">
                <input type="text" nz-input formControlName="buttonCode" placeholder="请输入..." />
            </nz-form-control>

            <nz-form-label [nzSm]="24" [nzMd]="5" [nzLg]="3" [nzXl]="2" nzRequired>按钮名称</nz-form-label>
            <nz-form-control [nzSm]="24" [nzMd]="7" [nzLg]="9" [nzXl]="10" nzErrorTip="按钮名称格式不正确（格式：1-25个字符）！">
                <input type="text" nz-input formControlName="buttonName" placeholder="请输入..." />
            </nz-form-control>
        </nz-form-item>
        
        <nz-form-item>
            <nz-form-label [nzSm]="24" [nzMd]="5" [nzLg]="3" [nzXl]="2" nzRequired>函数名</nz-form-label>
            <nz-form-control [nzSm]="24" [nzMd]="7" [nzLg]="9" [nzXl]="10" nzErrorTip="函数名格式不正确（格式：1-60个字符）！">
                <input type="text" nz-input formControlName="functionName" placeholder="请输入..." />
            </nz-form-control>

            <nz-form-label [nzSm]="24" [nzMd]="5" [nzLg]="3" [nzXl]="2" nzRequired>序号</nz-form-label>
            <nz-form-control [nzSm]="24" [nzMd]="7" [nzLg]="9" [nzXl]="10" nzErrorTip="序号格式不正确（格式：1-2个数字）！">
                <nz-input-number formControlName="sortNum" [nzMin]="1" [nzMax]="99" [nzStep]="1" nzPlaceHolder="请输入...">
                </nz-input-number>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label [nzSm]="24" [nzMd]="5" [nzLg]="3" [nzXl]="2" nzRequired>业务标识</nz-form-label>
            <nz-form-control [nzSm]="24" [nzMd]="7" [nzLg]="9" [nzXl]="10" nzErrorTip="请选择业务标识！">
                <nz-select formControlName="busniessMark" nzAllowClear nzShowSearch nzPlaceHolder="请选择...">
                    <nz-option [nzValue]="item.dicItemValue" [nzLabel]="item.dicItemName"
                        *ngFor="let item  of busniessMarkOptionList">
                    </nz-option>
                </nz-select>
            </nz-form-control>

            <nz-form-label [nzSm]="24" [nzMd]="5" [nzLg]="3" [nzXl]="2" nzRequired>布局标识</nz-form-label>
            <nz-form-control [nzSm]="24" [nzMd]="7" [nzLg]="9" [nzXl]="10" nzErrorTip="请选择布局标识！">
                <nz-select formControlName="layoutMark" nzAllowClear nzShowSearch nzPlaceHolder="请选择...">
                    <nz-option [nzValue]="item.dicItemValue" [nzLabel]="item.dicItemName"
                        *ngFor="let item  of layoutMarkOptionList">
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>


        <nz-form-item>
            <nz-form-label [nzSm]="24" [nzMd]="5" [nzLg]="3" [nzXl]="2" nzRequired>图标</nz-form-label>
            <nz-form-control [nzSm]="24" [nzMd]="7" [nzLg]="9" [nzXl]="10" nzErrorTip="图标格式不正确（格式：1-32个字符）！">
                <input type="text" nz-input formControlName="iconCls" placeholder="请输入..." />
            </nz-form-control>

            <nz-form-label [nzSm]="24" [nzMd]="5" [nzLg]="3" [nzXl]="2" nzRequired>按钮样式</nz-form-label>
            <nz-form-control [nzSm]="24" [nzMd]="7" [nzLg]="9" [nzXl]="10" nzErrorTip="请选择按钮样式！">
                <nz-select formControlName="btnCls" nzAllowClear nzShowSearch nzPlaceHolder="请选择...">
                    <nz-option nzCustomContent [nzValue]="item.dicItemValue" [nzLabel]="item.dicItemName"
                        *ngFor="let item  of btnClsOptionList">
                        <button nz-button [nzType]="item.dicItemValue" [ngClass]="'ant-btn-'+item.dicItemValue"
                            nzSize="small">{{item.dicItemName}}-{{item.dicItemValue}}</button>
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label [nzSm]="24" [nzMd]="5" [nzLg]="3" [nzXl]="2">表达式
            </nz-form-label>
            <nz-form-control [nzSm]="24" [nzMd]="7" [nzLg]="9" [nzXl]="10" nzErrorTip="表达式格式不正确（格式：0-256个字符）!">
                <nz-input-group [nzSuffix]="btnExpSuffixIcon" class="app-btn-exp-suffix">
                    <textarea nz-input rows="1" formControlName="btnExp" placeholder="请输入..."></textarea>
                </nz-input-group>
                <ng-template #btnExpSuffixIcon>
                    <i nz-icon nzType="question-circle" nzTheme="outline" nz-popover [nzPopoverTitle]="'表达式使用说明'"
                        [nzPopoverContent]="btnExpDescTpl"></i>
                    <ng-template #btnExpDescTpl>
                        <div class="app-btn-add-exp-desc">
                            表达式作用：通过简单的表达式控制按钮运行期的显示，
                            例如：资源库中有一个收藏功能，当它未被收藏时应该显示的是“收藏”，当它被收藏过显示的是“取消收藏”，这时可配置“收藏”与“取消收藏”两个按钮，
                            通过表达式控制它们的显示，其中“收藏”表达式配置为“data.status==='1'”，表示当数据的状态为1时显示；其中“取消收藏”表达式配置为
                            “data.status==='2'”，表示当数据状态为2时显示；这样两个按钮就会根据数据在运行期时显示了，目前按钮表达式只支持一个参数，这个参数名叫“data”,
                            所以表达式中的参数请使用data配置。
                            值得注意的是：代码级别中有一个showBtnFunction参数，可通过代码去改变按钮状态，它的优先级比表达式更高，同时更加灵活，请根据具体情况使用！
                        </div>
                    </ng-template>
                </ng-template>
            </nz-form-control>

            <nz-form-label [nzSm]="24" [nzMd]="5" [nzLg]="3" [nzXl]="2" nzRequired>状态</nz-form-label>
            <nz-form-control [nzSm]="24" [nzMd]="7" [nzLg]="9" [nzXl]="10" nzErrorTip="请选择状态！">
                <nz-select formControlName="status" nzAllowClear nzPlaceHolder="请选择...">
                    <nz-option [nzValue]="item.dicItemValue" [nzLabel]="item.dicItemName"
                        *ngFor="let item  of statusOptionList">
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>


        <nz-form-item>
            <nz-form-label [nzSm]="24" [nzMd]="5" [nzLg]="3" [nzXl]="2">描述</nz-form-label>
            <nz-form-control [nzSm]="24" [nzMd]="19" [nzLg]="21" [nzXl]="22" nzErrorTip="描述格式不正确（格式：0-100个字符）!">
                <textarea nz-input rows="3" formControlName="buttonDescribe" placeholder="请输入..."></textarea>
            </nz-form-control>
        </nz-form-item>

    </form>
</div>